<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>axios拦截器</title>
</head>
<body>
    <script>
        /*
            config 配置对象
        */
        // ---------------------------------------------------------Case1------------------------------------------------------------
        // 设置请求拦截器
        axios.interceptors.request.use(function(config){
            console.log('请求拦截器 成功', config);
            return config;
        }, function (error) {
            console.log('请求拦截器 失败', err);
            return Promise.reject(error);
        });


        // 设置响应拦截器
        axios.interceptors.response.use(function(config){
            console.log('响应拦截器 成功', config);
            return config;
        }, function (error) {
            console.log('响应拦截器 失败', error);
            return Promise.reject(error);
        });

        // 发送请求
        axios.get(
            'http://localhost:53000/posts/2',
        ).then(response => {
            console.log('自定义回调处理成功的结果', response);
        })


        /*
            执行顺序： 
                请求拦截器 成功 {...}
                响应拦截器 成功 {...}
                自定义回调处理成功的结果 {...}
        */ 


        // ---------------------------------------------------------Case2------------------------------------------------------------
        // 如果在请求拦截器成功后抛出错误，那么响应拦截器会失败，如下
        // 设置请求拦截器
        // axios.interceptors.request.use(function(config){
        //     console.log('请求拦截器 成功', config);
        //     // return config;
        //     throw new Error('error!!!');
        // }, function (error) {
        //     console.log('请求拦截器 失败', err);
        //     return Promise.reject(error);
        // });


        // // 设置响应拦截器
        // axios.interceptors.response.use(function(config){
        //     console.log('响应拦截器 成功', config);
        //     return config;
        // }, function (error) {
        //     console.log('响应拦截器 失败', error);
        //     return Promise.reject(error);
        // });

        // // 发送请求
        // axios.get(
        //     'http://localhost:53000/posts/2',
        // ).then(response => {
        //     console.log('自定义回调处理成功的结果', response);
        // }).catch(err => {
        //     console.log('自定义回调处理失败的结果', err);
        // })


        /*
            执行顺序： 
                请求拦截器 成功 {...}
                响应拦截器 失败 Error: error!!!
                自定义回调处理失败的结果 Error: error!!!
        */ 




        // ---------------------------------------------------------Case2------------------------------------------------------------
        // 如果有两个拦截器
        // 设置请求拦截器
        // axios.interceptors.request.use(function(config){
        //     console.log('请求拦截器1 成功', config);
        //     return config;
        // }, function (error) {
        //     console.log('请求拦截器1 失败', err);
        //     return Promise.reject(error);
        // });


        // axios.interceptors.request.use(function(config){
        //     console.log('请求拦截器2 成功', config);
        //     return config;
        // }, function (error) {
        //     console.log('请求拦截器2 失败', err);
        //     return Promise.reject(error);
        // });


        // // 设置响应拦截器
        // axios.interceptors.response.use(function(config){
        //     console.log('响应拦截器1 成功', config);
        //     return config;
        // }, function (error) {
        //     console.log('响应拦截器1 失败', error);
        //     return Promise.reject(error);
        // });

        // axios.interceptors.response.use(function(config){
        //     console.log('响应拦截器2 成功', config);
        //     return config;
        // }, function (error) {
        //     console.log('响应拦截器2 失败', error);
        //     return Promise.reject(error);
        // });

        // // 发送请求
        // axios.get(
        //     'http://localhost:53000/posts/2',
        // ).then(response => {
        //     console.log('自定义回调处理成功的结果', response);
        // });


        /*
            执行顺序： 
                请求拦截器2 成功 {...}
                请求拦截器1 成功 {...}
                响应拦截器1 成功 {...}
                响应拦截器2 成功 {...}
                自定义回调处理成功的结果 {...}
        */ 


    </script>
</body>
</html>